<template>
  <div class="comment" v-if="commentData">
    <h4 id="dingbu">评论</h4>
    <!-- 评论框 -->
    <div class="commentBox">
      <el-tag
        v-if="replyUser"
        class="replyTag"
        type="info"
        closable
        @close="handleClose"
      >回复 @{{replyUser.nickname}}</el-tag>
      <el-input
        type="textarea"
        v-model="commentText"
        resize="none"
        :autosize="true"
        maxlength="300"
      ></el-input>
      <div class="cmtCtrl">
        <div class="uploadPic">
          <el-upload
            :action="$axios.defaults.baseURL + '/upload'"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            name="files"
            :on-success="handleSuccess"
            ref="uploadImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </div>
        <el-button type="primary" size="mini" @click="postComment">提交</el-button>
      </div>
    </div>
    <!-- 评论列表 -->
    <div class="cmtList" v-if="commentData.data.length!=0">
      <commentItem
        v-for="item in commentData.data"
        :key="item.id"
        :commentData="item"
        @userInfo="saveUser"
      />
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="commentData.total"
      v-if="commentData.data.length!=0"
    ></el-pagination>
    <div class="empty" v-else>暂无评论，赶紧抢占沙发！</div>
  </div>
</template>

<script>
import commentItem from "@/components/raider/commentItem";
export default {
  components: {
    commentItem,
  },
  data() {
    return {
      commentText: "", //文本框
      dialogImageUrl: "", //图片弹出框地址
      dialogVisible: false, //图片弹出框是否显示
      replyUser: null, //回复用户的信息
      cover: [], //评论图片
      commentData: null, //评论列表信息
      currentPage: 1, //当前页码
      pageSize: 5, //页面条数
    };
  },
  watch: {
    $route: {
      handler() {
        this.getComment();
      },
      immediate: true,
    },
  },
  methods: {
    //发表评论
    postComment() {
      //数据校验
      if (this.commentText.trim() == "" && this.cover.length == 0) {
        this.$message.error("请输入评论内容");
        this.commentText = "";
        return;
      }
      //取出需要的pics数据
      this.cover = this.cover.map((item, i) => item.response[0]);
      var data = {
        content: this.commentText,
        pics: this.cover,
        post: this.$route.query.id,
      };
      //是否回复
      if (this.replyUser) {
        data.follow = this.replyUser.id;
      }
      this.$axios({
        url: "/comments",
        method: "post",
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token,
        },
        data,
      }).then((res) => {
        //评论完成后数据置空
        this.commentText = "";
        this.cover = [];
        this.$refs.uploadImg.clearFiles();
        this.replyUser = null;
        //重新获取评论
        this.getComment();
      });
    },
    //获取评论
    getComment() {
      this.$axios({
        url: "/posts/comments",
        params: {
          post: this.$route.query.id,
          _start: (this.currentPage - 1) * this.pageSize,
          _limit: this.pageSize,
        },
      }).then((res) => {
        this.commentData = res.data;
      });
    },
    //页面显示条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getComment();
    },
    //改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getComment();
    },
    //上传图片删除
    handleRemove(file, fileList) {
      this.cover = fileList;
    },
    //显示弹出图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //上传图片成功
    handleSuccess(val, file) {
      this.cover.push(file);
    },
    //取消回复用户
    handleClose() {
      this.replyUser = null;
    },
    //保存回复用户信息
    saveUser(val) {
      this.replyUser = val;
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  h4 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .commentBox {
    .replyTag {
      margin-bottom: 10px;
    }
    .cmtCtrl {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin: 10px 0 20px;
      /deep/.el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
      /deep/.el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
      }
    }
  }
  .cmtList {
    border: 1px solid #ddd;
  }
  .empty {
    color: #999;
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    border: 1px dashed #ddd;
  }
  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }
}
</style>